<template>
    <div>
        <el-dialog :title="`${title}角色`" center draggable v-model="visible" width="500px" :before-close="close" :close-on-click-modal="false" destroy-on-close>
            <div v-loading="loading" >
                <el-form ref="formRef" :model="formData" label-width="85px" label-position="right" status-icon label-suffix=":" >
                    <el-form-item label="角色名称" prop="roleName" :rules="[{ required: true, message: '请输入角色名称', trigger: 'blur' }]" >
                        <el-input v-model="formData.roleName" placeholder="请输入角色名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="角色编码" prop="roleCode" :rules="[{ required: true, message: '请输入角色编码', trigger: 'blur' }]" >
                        <el-input v-model="formData.roleCode" placeholder="请输入角色编码" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="角色状态" prop="status" :rules="[{ required: true, message: '请选择角色状态', trigger: 'change' }]" >
                        <el-switch v-model="formData.status" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用" ></el-switch>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark" >
                        <el-input v-model="formData.remark" placeholder="请输入备注" clearable></el-input>
                    </el-form-item>
                    <el-row justify="center" class="mt10" >
                        <el-button type="primary" @click="submitForm" >保存</el-button>
                        <el-button @click="close" >取消</el-button>
                    </el-row>
                </el-form>
            </div>

        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch, nextTick, toRefs } from 'vue'
import { add, update } from '@/api/system/role'
import { notify } from '@/utils/element'

const emit = defineEmits(['refresh'])

const formRef = ref()

const initData = {status: true}

const state = reactive({
    title: '新增',
    type: 'add' as FormType,
    visible: false,
    loading: false,
    formData: {} as SysRoleType,
})

const { title, type, visible, loading, formData } = {...toRefs(state)}

// 导出父组件访问
defineExpose({
    open
})

// 打开窗口
function open(type: FormType, title: string, data = {} as any) {
    state.title = title
    state.type = type
    state.formData = JSON.parse(JSON.stringify({...initData, ...data}))
    state.visible = true
}

// 关闭窗口
function close() {
    if (state.loading) return
    // 表单清空
    formRef.value.resetFields()
    state.visible = false
}

// 提交表单
function submitForm() {
    formRef.value?.validate((valid:any) => {
        if (!valid) return
        submitData()
    })
}

async function submitData() {
    try {
        state.loading = true
        let res
        if (type.value === 'add') {
            // 新增
            res = await add(state.formData)
        } else {
            // 修改
            res = await update(state.formData)
        }
        if (res?.code !== 20000) return
        state.loading = false
        notify('操作成功', {type:'success'})
        close()
        emit('refresh')
    } catch(error) {

    } finally {
        state.loading = false
    }
}
</script>

<style scoped>

</style>